<template>
  <layout-empty>

    <!-- 侧边菜单/Start -->
    <div class="left-side" :class="{'side-show':canShowSide}">
      <div class="side-menu">
        <div class="unlogin">
          <div class="login-btn" @click="ban">
            立即登录
          </div>
        </div>
        <div class="menu-list">
          <ul v-for="(item,index) in sideMenuList" :key="index">
            <li v-for="(subItem,key) in item" :key="index*10+key" @click="menuListClickHandle(key)">
              <i class="iconfont" v-html="subItem.icon"></i>
              <span>{{subItem.title}}</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="hide-click" @click="showSide"></div>
    </div>
    <!-- 侧边菜单/End -->

    <!-- 页面主体 -->
    <div class="index">

      <!-- 顶部栏/Start -->
      <div class="top-menu">
        <div class="lr side">
          <span class="iconfont" @click="showSide">&#xe63d;</span>
        </div>

        <!-- tag标签 Start -->
        <div class="center-tab">
          <ul>
            <li v-for="(item,index) in top_tab" :key="index">
              <span class="iconfont" :class="{on:index===tabIndex}" @click="toggleTopTab(index)" v-html="item.html" :data-tab="item.tab"></span>
            </li>
          </ul>
        </div>
        <!-- tag标签 End -->

        <div class="lr search">
          <span class="iconfont">&#xe61e;</span>
        </div>
      </div>
      <!-- 顶部栏/End -->

      <div class="container">
        <div class="inner-container" :style="innerContainerStyle">
          <div class="tab-container tab-container-recommend" >
            <tab :tabs="recommend_tabs">
              <tab-item>
                <div class="banner">
                  <banner :list="banner_list" :config="banner_config" class="sub-banner"></banner>
                </div>
              </tab-item>
              <tab-item>哈哈哈这是电台
              </tab-item>
            </tab>
          </div>
          <div class="tab-container tab-container-mv" >
            12311212
          </div>
        </div>
      </div>
    </div>
    <!-- 页面主体 -->

  </layout-empty>
</template>

<script>
  import layoutEmpty from '@/layout/empty'
  import tab from '@/components/tab'
  import tabItem from '@/components/tab-item'
  import banner from '@/components/banner'
  export default {
    name: "index",
    components:{layoutEmpty,tab,tabItem,banner},
    data(){
      return {
        tabIndex:0,
        top_tab:[{
          html:'&#xe601;',
          tab:'recommend'
        },{
          html:'&#xe62b;',
          tab:'mv'
        }],
        recommend_tabs:['推荐','电台'],
        canShowSide:false,
        sideMenuList:[
          {
            message:{
              icon:'&#xe666;',
              title:'我的消息'
            },
            shop:{
              icon:'&#xe63e;',
              title:'商城',
            }
          },{
            friend:{
              icon:'&#xe610;',
              title:'我的好友',
            },
            shop:{
              icon:'&#xe667;',
              title:'附近的人'
            }
          },{
            skin:{
              icon:'&#xe640;',
              title:'个性换肤',
            },
            stop:{
              icon:'&#xe668;',
              title:'定时停止播放'
            },
            scan:{
              icon:'&#xe602;',
              title:'扫一扫'
            },
            alarm:{
              icon:'&#xe694;',
              title:'音乐闹钟'
            },
            coupon:{
              icon:'&#xe63f;',
              title:'优惠券'
            }
          }
        ],
        banner_list:[],
        banner_config:{
          field:{
            thumb:'picUrl',
            src:'url'
          },
          duration:1000,
        }
      };
    },
    mounted(){
      this.banner();
    },
    updated(){
      // this.banner();
    },
    methods:{
      toggleTopTab(index){
        let tab_num = this.$data.top_tab.length;
        let tab_max_index = tab_num-1;
        this.$data.tabIndex = index<=tab_max_index?index:tab_max_index;
      },
      showSide(){
        this.$data.canShowSide = !this.$data.canShowSide;
      },
      ban(){
        this.$toast({
          message:'此功能未开放',
          position:'bottom'
        });
      },
      menuListClickHandle(tag){
        if(!tag){
          this.ban();
          return;
        }
        let self = this,
            callback = {

            };
        !!callback[tag]?callback[tag]():this.ban();
      },
      async banner(){
        let {data} = await this.$http.get('/banner');
        console.log(data);
        this.banner_list = data.banners;
      }
    },
    computed:{
      innerContainerStyle(){
        let translateX = this.$data.tabIndex===0?0:((100*this.$data.tabIndex)*-1+'vw');
        return {
          width:(100*this.$data.top_tab.length)+'vw',
          transform:'translateX('+translateX+')'
        };

      }
    }
  }
</script>

<style scoped lang="less">
  .left-side.side-show{
    background-color:rgba(0,0,0,.45);
    z-index:60;

    .side-menu{
      /*width:80%;*/
      left:0;

      .login-btn{
        width:9em;
        height:2.5em;
        line-height:2.5em;
        border-radius:2em;
        border:1px solid #67686A;
        text-align:center;
        color:#fff;
        position:relative;
        top:50%;
        margin:0 auto;
        transform:translateY(-50%);

      }
    }
  }
  .left-side{
    display:block;
    z-index: 48;
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    background-color:transparent;
    transition:all .3s;

    .side-menu{
      background-color:#F1F2F3;
      height:100%;
      float:left;
      /*width:0;*/
      width:80%;
      position:relative;
      left:-80%;
      overflow-x:hidden;
      overflow-y:auto;
      transition:left .3s;

      .unlogin{
        width:100%;
        height:(260/456)*80vw;
        background-image:url('/static/images/akl.png');
        background-repeat:no-repeat;
        background-size:cover;
      }

      .menu-list{
        width:100%;

        ul{
          background-color:#fff;
          width:100%;
          margin-bottom:.5em;
        }

        @menuItemHeight:2.5em;
        li{
          height:@menuItemHeight;
          line-height:@menuItemHeight;
          text-align:left;
          padding-left:1em;
          box-sizing:border-box;

          @iconSize:1.4em;
          i.iconfont{
            font-size:@iconSize;
            margin-right:0.5/@iconSize;
            color:#999999;
            position: relative;
            top: .1em;
          }

          span{
            color:#343434;
          }
        }
      }
    }

    .side-menu+.hide-click{
      width:auto;
      height:100%;
      overflow:auto;
    }

  }
  .index{
    width:100%;
    height:100%;
    overflow:hidden;
    position:relative;
    transition:all .3s;

    @topMenuHeight:4.5em;
    .top-menu{
      position:fixed;
      top:0;
      left:0;
      width:100%;
      height:@topMenuHeight;
      line-height:@topMenuHeight;
      background-color:#DF4338;
      padding:0 15px;
      box-sizing:border-box;
      z-index:50;
      display:flex;
      justify-content: space-between;

      .iconfont{
        color:#EC8E88;
        font-size:1.5em;
      }

      .lr{

        span{
          display:inline-block;
          color:#FFFFFF;

        }
      }

      .center-tab{

        ul{
          width:100%;
          height:100%;

          li{
            display:inline-block;
            height:100%;
            margin:0 1em;

            .iconfont{
              font-size:1.7em;
            }

            .iconfont.on{
              color:#fff;
            }
          }
        }
      }
    }

    .container{
      position:absolute;
      top:-1px;
      left:0;
      width:100%;
      height:100%;
      padding-top:@topMenuHeight;
      box-sizing:border-box;
      overflow:hidden;
      z-index:49;
      display:block;

      .inner-container{
        width:auto;
        height:100%;
        overflow:hidden;
        transition:transform .3s;

        .tab-container{
          display:inline-block;
          float:left;
          width:100vw;
          height:100%;
          overflow-y:auto;

          .banner{
            width:100%;
            height:auto;
            position:relative;

            &:before{
              position:absolute;
              top:0;
              left:0;
              content:'';
              width:100%;
              background-color:#DF4338;
              height:70%;
            }

            .sub-banner{
              width:100%;
              height:100%;
              background-color:transparent;
              position:relative;
            }
          }
        }

        &:after{
          clear:both;
          content:'';
          display:block;
          width:0;
          height:0;
        }
      }

    }
  }
</style>
